<template>
    <div>
        <header class="main-header">
            <!-- Logo -->
            <a href class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini">
                    <img :src="require('_SYS/img/icon2.png')" width="30px" height="30px">
                </span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg">
                    <img :src="require('_SYS/img/icon2.png')" width="30px" height="30px">&nbsp;&nbsp;
                    <b>应急指挥</b>
                </span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a
                    href="javascript:void(0);"
                    class="sidebar-toggle"
                    data-toggle="offcanvas"
                    role="button"
                >
                    <span class="sr-only">Toggle navigation</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <!-- Menu toggle button -->
                            <a href="javascript:void(0);" @click="returnBack">
                                <i class="fa fa-home"></i>
                            </a>
                        </li>
                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="dropdown messages-menu">
                            <a
                                href="javascript:void(0);"
                                class="dropdown-toggle"
                                data-toggle="dropdown"
                            >
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 4 messages</li>
                                <li class="footer">
                                    <a href="javascript:void(0);">See All Messages</a>
                                </li>
                            </ul>
                        </li>
                        <!-- Notifications: style can be found in dropdown.less -->
                        <li class="dropdown notifications-menu">
                            <a
                                href="javascript:void(0);"
                                class="dropdown-toggle"
                                data-toggle="dropdown"
                            >
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">10</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 10 notifications</li>
                                <li>
                                    <!-- inner menu: contains the actual data -->
                                    <ul class="menu">
                                        <li>
                                            <a href="javascript:void(0);">
                                                <i class="fa fa-users text-aqua"></i> 5 new members joined today
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);">
                                                <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);">
                                                <i class="fa fa-users text-red"></i> 5 new members joined
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);">
                                                <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);">
                                                <i class="fa fa-user text-red"></i> You changed your username
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="javascript:void(0);">View all</a>
                                </li>
                            </ul>
                        </li>
                        <!-- Tasks: style can be found in dropdown.less -->
                        <li class="dropdown tasks-menu">
                            <a
                                href="javascript:void(0);"
                                class="dropdown-toggle"
                                data-toggle="dropdown"
                            >
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>
                                    <!-- inner menu: contains the actual data -->
                                    <ul class="menu">
                                        <li>
                                            <!-- Task item -->
                                            <a href="javascript:void(0);">
                                                <h3>
                                                    Design some buttons
                                                    <small class="pull-right">20%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div
                                                        class="progress-bar progress-bar-aqua"
                                                        style="width: 20%"
                                                        role="progressbar"
                                                        aria-valuenow="20"
                                                        aria-valuemin="0"
                                                        aria-valuemax="100"
                                                    >
                                                        <span class="sr-only">20% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <!-- end task item -->
                                        <li>
                                            <!-- Task item -->
                                            <a href="javascript:void(0);">
                                                <h3>
                                                    Create a nice theme
                                                    <small class="pull-right">40%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div
                                                        class="progress-bar progress-bar-green"
                                                        style="width: 40%"
                                                        role="progressbar"
                                                        aria-valuenow="20"
                                                        aria-valuemin="0"
                                                        aria-valuemax="100"
                                                    >
                                                        <span class="sr-only">40% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <!-- end task item -->
                                        <li>
                                            <!-- Task item -->
                                            <a href="javascript:void(0);">
                                                <h3>
                                                    Some task I need to do
                                                    <small
                                                        class="pull-right"
                                                    >60%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div
                                                        class="progress-bar progress-bar-red"
                                                        style="width: 60%"
                                                        role="progressbar"
                                                        aria-valuenow="20"
                                                        aria-valuemin="0"
                                                        aria-valuemax="100"
                                                    >
                                                        <span class="sr-only">60% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <!-- end task item -->
                                        <li>
                                            <!-- Task item -->
                                            <a href="javascript:void(0);">
                                                <h3>
                                                    Make beautiful transitions
                                                    <small
                                                        class="pull-right"
                                                    >80%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div
                                                        class="progress-bar progress-bar-yellow"
                                                        style="width: 80%"
                                                        role="progressbar"
                                                        aria-valuenow="20"
                                                        aria-valuemin="0"
                                                        aria-valuemax="100"
                                                    >
                                                        <span class="sr-only">80% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <!-- end task item -->
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="javascript:void(0);">View all tasks</a>
                                </li>
                            </ul>
                        </li>
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a
                                href="javascript:void(0);"
                                class="dropdown-toggle"
                                data-toggle="dropdown"
                            >
                                <img
                                    :src="require('_LTE/dist/img/user2-160x160.jpg')"
                                    class="user-image"
                                    alt="User Image"
                                >
                                <span class="hidden-xs">{{userinfo.username}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img
                                        :src="require('_LTE/dist/img/user2-160x160.jpg')"
                                        class="img-circle"
                                        alt="User Image"
                                    >
                                </li>
                                <!-- Menu Body -->
                                <li class="user-body">
                                    <div class="row">
                                        <div class="col-xs-4 text-center">
                                            <a href="javascript:void(0);">Followers</a>
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            <a href="javascript:void(0);">Sales</a>
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            <a href="javascript:void(0);">Friends</a>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </li>
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a
                                            href="javascript:void(0);"
                                            class="btn btn-default btn-flat"
                                        >Profile</a>
                                    </div>
                                    <div class="pull-right">
                                        <a
                                            href="javascript:void(0);"
                                            class="btn btn-default btn-flat"
                                        >Sign out</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <!-- Control Sidebar Toggle Button -->
                        <li>
                            <a href="javascript:void(0);" data-toggle="control-sidebar">
                                <i class="fa fa-gears"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- /.search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <!-- <li v-for="item in $router.options.routes" v-if="!item.hiddenMenu" :class="{active: $route.path === item.redirect}" :key="item.value"> -->
                    <li
                        v-for="item in $router.options.routes"
                        v-if="!item.hiddenMenu"
                        :key="item.value"
                    >
                        <!--<img src="../img/files.png" width="18px" height="18px" />-->
                        <!-- <a :to="{path: item.path}"> -->
                        <a href="#javascript">
                            <template
                                v-if="!item.children || !item.children.filter(v=>{return !v.hiddenMenu}).length"
                            >
                                <i :class="item.iconName"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <template v-else>
                                <i :class="item.iconName"></i>
                                
                                <span>
                                    <span>{{item.name}}</span>
                                </span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                            </template>
                        </a>
                        <ul
                            class="treeview-menu"
                            v-if="item.children && item.children.filter(v=>{return !v.hiddenMenu}).length > 0"
                        >
                            <li
                                v-for="subitem in item.children"
                                :class="{active: $route.path ===subitem.path}"
                                :key="subitem.value"
                            >
                                <router-link :to="{path: subitem.path}" v-if="!subitem.hiddenMenu">
                                    <i :class="subitem.iconName"></i>
                                    {{subitem.name}}&nbsp;&nbsp;
                                </router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper clearfix">
            <router-view></router-view>
        </div>

        <!-- Control Sidebar -->
        <rightBar/>
    </div>
</template>
<script>
import rightBar from "./rightBar";
import { getUserInfo } from "@/utils/auth";

export default {
    data() {
        return {
            userinfo: getUserInfo() || {}
        };
    },
    mounted() {
        window.onbeforeunload = function(e) {
            var storage = window.localStorage;
            storage.clear();
        };
    },
    methods: {
        returnBack() {
            if (confirm("确定返回主界面?")) {
                window.location.href =
                    "http://192.168.101.10:8080/BasePlatForm/win10Menu.html";
            }
        }
    },
    components: {
        rightBar
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
